সিএসএস ভিউ ট্রানজিশন আয়ত্ত করা: সিউডো-এলিমেন্ট স্টাইলিং-এর গভীরে

ওয়েব ডেভেলপমেন্টের সদা পরিবর্তনশীল জগতে, একটি নির্বিঘ্ন, সাবলীল এবং আকর্ষক ব্যবহারকারীর অভিজ্ঞতা অর্জনের চেষ্টা অবিরাম। বছরের পর বছর ধরে, ডেভেলপাররা ওয়েব এবং নেটিভ অ্যাপ্লিকেশনের মধ্যেকার ব্যবধান পূরণের চেষ্টা করে আসছেন, বিশেষ করে পেজ ট্রানজিশনের মসৃণতার ক্ষেত্রে। প্রথাগত ওয়েব নেভিগেশনের ফলে প্রায়শই একটি কঠোর, সম্পূর্ণ-পেজ রিলোড হয়—একটি ফাঁকা সাদা স্ক্রিন যা ব্যবহারকারীর মনোযোগকে মুহূর্তের জন্য ভেঙে দেয়। সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPAs) এটি কমিয়েছে, কিন্তু কাস্টম, অর্থপূর্ণ ট্রানজিশন তৈরি করা একটি জটিল এবং প্রায়শই ভঙ্গুর কাজ হিসেবেই রয়ে গেছে, যা জাভাস্ক্রিপ্ট লাইব্রেরি এবং জটিল স্টেট ম্যানেজমেন্টের উপর ব্যাপকভাবে নির্ভরশীল।

এবার আসা যাক সিএসএস ভিউ ট্রানজিশন এপিআই (CSS View Transitions API)-এর কথায়, এটি একটি যুগান্তকারী প্রযুক্তি যা ওয়েবে UI পরিবর্তনগুলি সামলানোর পদ্ধতিকে বিপ্লব করতে প্রস্তুত। এই শক্তিশালী API বিভিন্ন DOM স্টেটের মধ্যে অ্যানিমেট করার জন্য একটি সহজ অথচ অবিশ্বাস্যভাবে নমনীয় প্রক্রিয়া সরবরাহ করে, যা ব্যবহারকারীদের প্রত্যাশিত মসৃণ, অ্যাপ-সদৃশ অভিজ্ঞতা তৈরি করা আগের চেয়ে সহজ করে তোলে। এই API-এর ক্ষমতার কেন্দ্রে রয়েছে কিছু নতুন সিএসএস সিউডো-এলিমেন্টের একটি সেট। এগুলি আপনার সাধারণ সিলেক্টরের মতো নয়; এগুলি ব্রাউজার দ্বারা তৈরি করা ডাইনামিক, অস্থায়ী এলিমেন্ট যা আপনাকে একটি ট্রানজিশনের প্রতিটি পর্বের উপর সূক্ষ্ম নিয়ন্ত্রণ দেয়। এই গাইডটি আপনাকে এই সিউডো-এলিমেন্ট ট্রি-এর গভীরে নিয়ে যাবে, যেখানে বিশ্বব্যাপী দর্শকদের জন্য অত্যাশ্চর্য, পারফরম্যান্ট এবং অ্যাক্সেসিবল অ্যানিমেশন তৈরি করার জন্য প্রতিটি উপাদানকে কীভাবে স্টাইল করতে হয় তা অন্বেষণ করা হবে।

একটি ভিউ ট্রানজিশনের গঠন

আমরা একটি ট্রানজিশন স্টাইল করার আগে, আমাদের বুঝতে হবে যখন একটি ট্রানজিশন শুরু হয় তখন পর্দার আড়ালে কী ঘটে। যখন আপনি একটি ভিউ ট্রানজিশন শুরু করেন (উদাহরণস্বরূপ, document.startViewTransition() কল করে), ব্রাউজার কয়েকটি ধাপ সম্পাদন করে:

• পুরানো স্টেট ক্যাপচার: ব্রাউজার বর্তমান পেজের অবস্থার একটি "স্ক্রিনশট" নেয়।
• DOM আপডেট: আপনার কোড এরপর DOM-এ পরিবর্তন আনে (যেমন, একটি নতুন ভিউতে নেভিগেট করা, এলিমেন্ট যোগ করা বা সরানো)।
• নতুন স্টেট ক্যাপচার: DOM আপডেট সম্পূর্ণ হলে, ব্রাউজার নতুন অবস্থার একটি স্ক্রিনশট নেয়।
• সিউডো-এলিমেন্ট ট্রি তৈরি: এরপর ব্রাউজার পেজের ওভারলেতে সিউডো-এলিমেন্টের একটি অস্থায়ী ট্রি তৈরি করে। এই ট্রি-তে পুরানো এবং নতুন অবস্থার ক্যাপচার করা ছবি থাকে।
• অ্যানিমেট: এই সিউডো-এলিমেন্টগুলিতে সিএসএস অ্যানিমেশন প্রয়োগ করা হয়, যা পুরানো স্টেট থেকে নতুন স্টেটে একটি মসৃণ ট্রানজিশন তৈরি করে। ডিফল্ট হিসেবে একটি সাধারণ ক্রস-ফেড থাকে।
• পরিস্কার করা: অ্যানিমেশন সম্পূর্ণ হলে, সিউডো-এলিমেন্ট ট্রি সরিয়ে ফেলা হয় এবং ব্যবহারকারী নতুন, লাইভ DOM-এর সাথে ইন্টারঅ্যাক্ট করতে পারে।

কাস্টমাইজেশনের চাবিকাঠি হল এই অস্থায়ী সিউডো-এলিমেন্ট ট্রি। এটিকে একটি ডিজাইন টুলের লেয়ারের সেট হিসেবে ভাবুন, যা অস্থায়ীভাবে আপনার পেজের উপরে রাখা হয়েছে। আপনার এই লেয়ারগুলির উপর সম্পূর্ণ সিএসএস নিয়ন্ত্রণ রয়েছে। এখানে সেই কাঠামোটি দেওয়া হলো যা নিয়ে আপনি কাজ করবেন:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

চলুন দেখে নেওয়া যাক এই সিউডো-এলিমেন্টগুলির প্রত্যেকটি কী প্রতিনিধিত্ব করে।

সিউডো-এলিমেন্টের চরিত্রসমূহ

::view-transition: এটি সম্পূর্ণ কাঠামোর রুট। এটি একটি একক এলিমেন্ট যা ভিউপোর্ট পূরণ করে এবং পেজের অন্য সব কন্টেন্টের উপরে বসে। এটি সমস্ত ট্রানজিশনিং গ্রুপের কন্টেইনার হিসাবে কাজ করে এবং ট্রানজিশনের সামগ্রিক বৈশিষ্ট্য যেমন সময়কাল বা টাইমিং ফাংশন সেট করার জন্য একটি দুর্দান্ত জায়গা।

::view-transition-group(*): প্রতিটি স্বতন্ত্র ট্রানজিশনিং এলিমেন্টের জন্য (যা view-transition-name সিএসএস প্রপার্টি দ্বারা চিহ্নিত), একটি গ্রুপ তৈরি করা হয়। এই সিউডো-এলিমেন্টটি তার কন্টেন্টের অবস্থান এবং আকার অ্যানিমেট করার জন্য দায়ী। যদি আপনার একটি কার্ড থাকে যা স্ক্রিনের এক পাশ থেকে অন্য দিকে চলে যায়, তবে সেটি আসলে ::view-transition-group যা নড়াচড়া করছে।

::view-transition-image-pair(*): গ্রুপের ভিতরে থাকা এই এলিমেন্টটি পুরানো এবং নতুন ভিউগুলির জন্য একটি কন্টেইনার এবং ক্লিপিং মাস্ক হিসাবে কাজ করে। এর প্রধান ভূমিকা হল অ্যানিমেশনের সময় border-radius বা transform-এর মতো প্রভাব বজায় রাখা এবং ডিফল্ট ক্রস-ফেড অ্যানিমেশন পরিচালনা করা।

::view-transition-old(*): এটি এলিমেন্টের পুরানো অবস্থার (DOM পরিবর্তনের আগে) "স্ক্রিনশট" বা রেন্ডার করা ভিউ উপস্থাপন করে। ডিফল্টরূপে, এটি opacity: 1 থেকে opacity: 0-তে অ্যানিমেট করে।

::view-transition-new(*): এটি এলিমেন্টের নতুন অবস্থার (DOM পরিবর্তনের পরে) "স্ক্রিনশট" বা রেন্ডার করা ভিউ উপস্থাপন করে। ডিফল্টরূপে, এটি opacity: 0 থেকে opacity: 1-তে অ্যানিমেট করে।

রুট: ::view-transition সিউডো-এলিমেন্টের স্টাইলিং

::view-transition সিউডো-এলিমেন্টটি হলো সেই ক্যানভাস যার উপর আপনার পুরো অ্যানিমেশনটি আঁকা হয়। শীর্ষ-স্তরের কন্টেইনার হিসাবে, এটি এমন বৈশিষ্ট্যগুলি সংজ্ঞায়িত করার জন্য আদর্শ জায়গা যা ট্রানজিশনে বিশ্বব্যাপী প্রযোজ্য হওয়া উচিত। ডিফল্টরূপে, ব্রাউজার অ্যানিমেশনের একটি সেট সরবরাহ করে, তবে আপনি সহজেই সেগুলি ওভাররাইড করতে পারেন।

উদাহরণস্বরূপ, ডিফল্ট ট্রানজিশনটি একটি ক্রস-ফেড যা ২৫০ মিলিসেকেন্ড স্থায়ী হয়। আপনি যদি আপনার সাইটের প্রতিটি ট্রানজিশনের জন্য এটি পরিবর্তন করতে চান, তবে আপনি রুট সিউডো-এলিমেন্টকে টার্গেট করতে পারেন:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

এই সাধারণ নিয়মটি এখন সমস্ত ডিফল্ট পেজ ফেডকে দ্বিগুণ সময় নিতে এবং একটি 'ease-in-out' কার্ভ ব্যবহার করতে বাধ্য করবে, যা তাদের একটি সামান্য ভিন্ন অনুভূতি দেবে। যদিও আপনি এখানে জটিল অ্যানিমেশন প্রয়োগ করতে পারেন, তবে এটি সাধারণত সার্বজনীন টাইমিং এবং ইজিং নির্ধারণের জন্য সবচেয়ে ভাল ব্যবহৃত হয়, এবং বিস্তারিত কোরিওগ্রাফি আরও নির্দিষ্ট সিউডো-এলিমেন্টগুলিকে সামলাতে দেওয়া উচিত।

গ্রুপিং এবং নামকরণ: `view-transition-name`-এর শক্তি

কোনো অতিরিক্ত কাজ ছাড়াই, ভিউ ট্রানজিশন এপিআই পুরো পেজের জন্য একটি ক্রস-ফেড সরবরাহ করে। এটি রুটের জন্য একটি একক সিউডো-এলিমেন্ট গ্রুপ দ্বারা পরিচালিত হয়। এপিআই-এর আসল শক্তি তখন উন্মোচিত হয় যখন আপনি নির্দিষ্ট, পৃথক এলিমেন্টগুলিকে বিভিন্ন স্টেটের মধ্যে ট্রানজিশন করতে চান। উদাহরণস্বরূপ, একটি তালিকা পেজের একটি পণ্যের থাম্বনেইলকে একটি বিস্তারিত পেজের প্রধান পণ্যের ছবির অবস্থানে নির্বিঘ্নে বড় করা এবং সরানো।

ব্রাউজারকে বলতে যে বিভিন্ন DOM স্টেটের দুটি এলিমেন্ট ধারণাগতভাবে একই, আপনি view-transition-name সিএসএস প্রপার্টি ব্যবহার করেন। এই প্রপার্টিটি অবশ্যই প্রারম্ভিক এলিমেন্ট এবং শেষ এলিমেন্ট উভয় ক্ষেত্রেই প্রয়োগ করতে হবে।

/* তালিকা পেজের CSS-এ */

.product-thumbnail {

  view-transition-name: product-image;

}

/* বিস্তারিত পেজের CSS-এ */

.main-product-image {

  view-transition-name: product-image;

}

উভয় এলিমেন্টকে একই অনন্য নাম ('product-image' এই ক্ষেত্রে) দিয়ে, আপনি ব্রাউজারকে নির্দেশ দেন: "শুধু পুরানো পেজটি ফেড আউট এবং নতুন পেজটি ফেড ইন করার পরিবর্তে, এই নির্দিষ্ট এলিমেন্টের জন্য একটি বিশেষ ট্রানজিশন তৈরি কর।" ব্রাউজার এখন রুট ফেড থেকে আলাদাভাবে এর অ্যানিমেশন পরিচালনা করার জন্য একটি ডেডিকেটেড ::view-transition-group(product-image) তৈরি করবে। এটিই সেই মৌলিক ধারণা যা জনপ্রিয় "মরফিং" বা "শেয়ার্ড এলিমেন্ট" ট্রানজিশন প্রভাবকে সক্ষম করে।

গুরুত্বপূর্ণ নোট: একটি ট্রানজিশনের সময় যেকোনো মুহূর্তে, একটি view-transition-name অবশ্যই অনন্য হতে হবে। আপনি একই সময়ে একই নামের দুটি দৃশ্যমান এলিমেন্ট রাখতে পারবেন না।

গভীরভাবে স্টাইলিং: মূল সিউডো-এলিমেন্টসমূহ

আমাদের এলিমেন্টগুলির নামকরণ করার পরে, আমরা এখন ব্রাউজার তাদের জন্য যে নির্দিষ্ট সিউডো-এলিমেন্টগুলি তৈরি করে সেগুলির স্টাইলিংয়ে ডুব দিতে পারি। এখানেই আপনি সত্যিই কাস্টম এবং অভিব্যক্তিপূর্ণ অ্যানিমেশন তৈরি করতে পারেন।

`::view-transition-group(name)`: মুভার (Mover)

গ্রুপের একমাত্র দায়িত্ব হল পুরানো এলিমেন্টের আকার এবং অবস্থান থেকে নতুন এলিমেন্টের আকার এবং অবস্থানে ট্রানজিশন করা। এতে প্রকৃত কন্টেন্টের চেহারা থাকে না, কেবল তার বাউন্ডিং বক্স থাকে। এটিকে একটি চলমান ফ্রেম হিসাবে ভাবুন।

ডিফল্টরূপে, ব্রাউজার এর transform এবং width/height প্রপার্টি অ্যানিমেট করে। আপনি বিভিন্ন প্রভাব তৈরি করতে এটি ওভাররাইড করতে পারেন। উদাহরণস্বরূপ, আপনি একটি বাঁকা পথ বরাবর অ্যানিমেট করে এর গতিবিধিতে একটি আর্ক যোগ করতে পারেন, বা এর যাত্রাপথে এটিকে বড় এবং ছোট করতে পারেন।

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

এই উদাহরণে, আমরা শুধুমাত্র পণ্যের ছবির গতিবিধিতে একটি নির্দিষ্ট ইজিং ফাংশন প্রয়োগ করছি, যা এটিকে আরও ডাইনামিক এবং শারীরিক মনে করায়, এবং পেজের বাকি অংশের ডিফল্ট ফেডকে প্রভাবিত করে না।

`::view-transition-image-pair(name)`: ক্লিপার এবং ফেডার (Clipper and Fader)

চলমান গ্রুপের ভিতরে থাকা, aimage-pair পুরানো এবং নতুন ভিউ ধারণ করে। এটি একটি ক্লিপিং মাস্ক হিসাবে কাজ করে, তাই যদি আপনার এলিমেন্টের একটি border-radius থাকে, তবে image-pair নিশ্চিত করে যে কন্টেন্টটি আকার এবং অবস্থান অ্যানিমেশনের সময় সেই ব্যাসার্ধের সাথে ক্লিপ করা থাকে। এর অন্য প্রধান কাজ হলো পুরানো এবং নতুন কন্টেন্টের মধ্যে ডিফল্ট ক্রস-ফেডকে সমন্বয় করা।

আপনি ভিজ্যুয়াল সামঞ্জস্য নিশ্চিত করতে বা আরও উন্নত প্রভাব তৈরি করতে এই এলিমেন্টটিকে স্টাইল করতে চাইতে পারেন। একটি গুরুত্বপূর্ণ প্রপার্টি যা বিবেচনা করা উচিত তা হল isolation: isolate। এটি অত্যন্ত গুরুত্বপূর্ণ যদি আপনি চিলড্রেন (পুরানো এবং নতুন) এর উপর উন্নত mix-blend-mode প্রভাব ব্যবহার করার পরিকল্পনা করেন, কারণ এটি একটি নতুন স্ট্যাকিং কনটেক্সট তৈরি করে এবং ব্লেন্ডিংকে ট্রানজিশন গ্রুপের বাইরের এলিমেন্টগুলিকে প্রভাবিত করা থেকে বিরত রাখে।

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` এবং `::view-transition-new(name)`: মূল আকর্ষণ

এগুলি হল সেই সিউডো-এলিমেন্ট যা DOM পরিবর্তনের আগে এবং পরে আপনার এলিমেন্টের ভিজ্যুয়াল চেহারা উপস্থাপন করে। এখানেই আপনার বেশিরভাগ কাস্টম অ্যানিমেশনের কাজ হবে। ডিফল্টরূপে, ব্রাউজার opacity এবং mix-blend-mode ব্যবহার করে তাদের উপর একটি সাধারণ ক্রস-ফেড অ্যানিমেশন চালায়। একটি কাস্টম অ্যানিমেশন তৈরি করতে, আপনাকে প্রথমে ডিফল্টটি বন্ধ করতে হবে।

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

একবার ডিফল্ট অ্যানিমেশনটি নিষ্ক্রিয় হয়ে গেলে, আপনি নিজের অ্যানিমেশন প্রয়োগ করতে স্বাধীন। আসুন কয়েকটি সাধারণ প্যাটার্ন অন্বেষণ করি।

কাস্টম অ্যানিমেশন: স্লাইড

একটি ক্রস-ফেডের পরিবর্তে, আসুন একটি কন্টেইনারের বিষয়বস্তুকে স্লাইড করে ভেতরে নিয়ে আসি। উদাহরণস্বরূপ, যখন নিবন্ধগুলির মধ্যে নেভিগেট করা হয়, আমরা চাই নতুন নিবন্ধের লেখাটি ডান দিক থেকে স্লাইড করে আসুক এবং পুরানো লেখাটি বাম দিকে স্লাইড করে বেরিয়ে যাক।

প্রথমে, কীফ্রেমগুলি সংজ্ঞায়িত করুন:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

এখন, 'article-content' নামের এলিমেন্টের জন্য পুরানো এবং নতুন সিউডো-এলিমেন্টে এই অ্যানিমেশনগুলি প্রয়োগ করুন।

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

কাস্টম অ্যানিমেশন: 3D ফ্লিপ

আরও নাটকীয় প্রভাবের জন্য, আপনি একটি 3D কার্ড ফ্লিপ তৈরি করতে পারেন। এর জন্য transform প্রপার্টিকে rotateY দিয়ে অ্যানিমেট করতে হবে এবং backface-visibility পরিচালনা করতে হবে।

/* গ্রুপের একটি 3D কনটেক্সট প্রয়োজন */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* image-pair-কেও 3D কনটেক্সট সংরক্ষণ করতে হবে */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* পুরানো ভিউটি 0 থেকে -180 ডিগ্রিতে ফ্লিপ করে */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* নতুন ভিউটি 180 থেকে 0 ডিগ্রিতে ফ্লিপ করে */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

ব্যবহারিক উদাহরণ এবং উন্নত কৌশল

তত্ত্ব উপকারী, কিন্তু ব্যবহারিক প্রয়োগের মাধ্যমেই আমরা সত্যিই শিখি। আসুন কিছু সাধারণ পরিস্থিতি এবং ভিউ ট্রানজিশন সিউডো-এলিমেন্ট দিয়ে সেগুলি কীভাবে সমাধান করা যায় তা দেখি।

উদাহরণ: "মরফিং" কার্ড থাম্বনেইল

এটি হল ক্লাসিক শেয়ার্ড এলিমেন্ট ট্রানজিশন। ব্যবহারকারী প্রোফাইলের একটি গ্যালারি কল্পনা করুন। প্রতিটি প্রোফাইল একটি কার্ড যার একটি অবতার আছে। যখন আপনি একটি কার্ডে ক্লিক করেন, আপনি একটি বিস্তারিত পেজে নেভিগেট করেন যেখানে সেই একই অবতারটি শীর্ষে বড় করে প্রদর্শিত হয়।

ধাপ ১: নাম বরাদ্দ করুন

আপনার গ্যালারি পেজে, অবতারের ছবিটি একটি নাম পায়। নামটি প্রতিটি কার্ডের জন্য অনন্য হওয়া উচিত, উদাহরণস্বরূপ, ব্যবহারকারীর আইডির উপর ভিত্তি করে।

/* gallery-item.css-এ */

.card-avatar { view-transition-name: avatar-user-123; }

প্রোফাইল বিস্তারিত পেজে, বড় হেডার অবতারটি ঠিক একই নাম পায়।

/* profile-page.css-এ */

.profile-header-avatar { view-transition-name: avatar-user-123; }

ধাপ ২: অ্যানিমেশন কাস্টমাইজ করুন

ডিফল্টরূপে, ব্রাউজার অবতারটিকে সরাবে এবং স্কেল করবে, কিন্তু এটি কন্টেন্টটিকে ক্রস-ফেডও করবে। যদি ছবিটি একই হয়, তবে এই ফেড অপ্রয়োজনীয় এবং একটি সামান্য ফ্লিকার সৃষ্টি করতে পারে। আমরা এটি নিষ্ক্রিয় করতে পারি।

/* এখানে তারকা (*) যেকোনো নামের গ্রুপের জন্য একটি ওয়াইল্ডকার্ড */

::view-transition-image-pair(*) {

  /* ডিফল্ট ফেড নিষ্ক্রিয় করুন */

  animation-duration: 0s;

}

অপেক্ষা করুন, যদি আমরা ফেড নিষ্ক্রিয় করি, তাহলে কন্টেন্ট কীভাবে বদলাবে? শেয়ার্ড এলিমেন্টগুলির জন্য যেখানে পুরানো এবং নতুন ভিউ একই, ব্রাউজারটি পুরো ট্রানজিশনের জন্য শুধুমাত্র একটি ভিউ ব্যবহার করার মতো যথেষ্ট স্মার্ট। `image-pair` মূলত শুধুমাত্র একটি ছবি ধারণ করে, তাই ফেড নিষ্ক্রিয় করা কেবল এই অপ্টিমাইজেশনটি প্রকাশ করে। যে এলিমেন্টগুলিতে কন্টেন্ট আসলে পরিবর্তিত হয়, সেখানে ডিফল্ট ফেডের পরিবর্তে আপনার একটি কাস্টম অ্যানিমেশন প্রয়োজন হবে।

অ্যাসপেক্ট রেশিও পরিবর্তন সামলানো

একটি সাধারণ চ্যালেঞ্জ দেখা দেয় যখন একটি ট্রানজিশনিং এলিমেন্ট তার অ্যাসপেক্ট রেশিও পরিবর্তন করে। উদাহরণস্বরূপ, একটি তালিকা পেজের একটি 16:9 ল্যান্ডস্কেপ থাম্বনেইল বিস্তারিত পেজে একটি 1:1 বর্গাকার অবতারে ট্রানজিশন করতে পারে। ব্রাউজারের ডিফল্ট আচরণ হল প্রস্থ এবং উচ্চতা স্বাধীনভাবে অ্যানিমেট করা, যার ফলে ট্রানজিশনের সময় ছবিটি সংকুচিত বা প্রসারিত দেখায়।

সমাধানটি চমৎকার। আমরা ::view-transition-group-কে আকার এবং অবস্থান পরিবর্তন সামলাতে দিই, কিন্তু আমরা এর মধ্যে থাকা পুরানো এবং নতুন ছবিগুলির স্টাইলিং ওভাররাইড করি।

লক্ষ্য হল পুরানো এবং নতুন "স্ক্রিনশট" গুলিকে বিকৃত না করে তাদের কন্টেইনার পূরণ করানো। আমরা তাদের প্রস্থ এবং উচ্চতা 100% সেট করে এবং ব্রাউজারের ডিফল্ট অবজেক্ট-ফিট প্রপার্টি (যা মূল এলিমেন্ট থেকে উত্তরাধিকার সূত্রে প্রাপ্ত) কে সঠিকভাবে স্কেলিং পরিচালনা করতে দিয়ে এটি করতে পারি।

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* বিকৃতি রোধ করতে কন্টেইনারটি পূরণ করুন */

  width: 100%;

  height: 100%;

  

  /* প্রভাবটি পরিষ্কারভাবে দেখতে ডিফল্ট ক্রস-ফেড ওভাররাইড করুন */

  animation: none;

}

এই সিএসএস দিয়ে, `image-pair` মসৃণভাবে তার অ্যাসপেক্ট রেশিও অ্যানিমেট করবে, এবং ভিতরের ছবিগুলি সঠিকভাবে ক্রপ বা লেটারবক্সড হবে (তাদের `object-fit` মানের উপর নির্ভর করে), যেমনটা তারা একটি সাধারণ কন্টেইনারে হত। এরপর আপনি এই সংশোধিত জ্যামিতির উপরে আপনার নিজস্ব কাস্টম অ্যানিমেশন, যেমন একটি ক্রস-ফেড, যোগ করতে পারেন।

ডিবাগিং এবং ব্রাউজার সাপোর্ট

যেসব এলিমেন্ট সেকেন্ডের ভগ্নাংশের জন্য বিদ্যমান থাকে সেগুলির স্টাইলিং করা কঠিন হতে পারে। সৌভাগ্যবশত, আধুনিক ব্রাউজারগুলি এর জন্য চমৎকার ডেভেলপার টুল সরবরাহ করে। Chrome বা Edge DevTools-এ, আপনি "Animations" প্যানেলে যেতে পারেন, এবং যখন আপনি একটি ভিউ ট্রানজিশন ট্রিগার করেন, আপনি এটি পজ করতে পারেন। অ্যানিমেশনটি পজ থাকা অবস্থায়, আপনি DOM-এর অন্য যেকোনো অংশের মতো পুরো `::view-transition` সিউডো-এলিমেন্ট ট্রি পরিদর্শন করতে "Elements" প্যানেল ব্যবহার করতে পারেন। আপনি প্রয়োগ করা স্টাইলগুলি দেখতে পারেন এবং এমনকি আপনার অ্যানিমেশনগুলিকে নিখুঁত করার জন্য রিয়েল-টাইমে সেগুলি পরিবর্তনও করতে পারেন।

২০২৩ সালের শেষের দিকে, ভিউ ট্রানজিশন এপিআই ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে (Chrome, Edge, Opera) সমর্থিত। Firefox এবং Safari-এর জন্য ইমপ্লিমেন্টেশন চলছে। এটি এটিকে প্রগ্রেসিভ এনহ্যান্সমেন্ট-এর জন্য একটি নিখুঁত প্রার্থী করে তোলে। সমর্থিত ব্রাউজার ব্যবহারকারীরা একটি আনন্দদায়ক, উন্নত অভিজ্ঞতা পান, যখন অন্য ব্রাউজারের ব্যবহারকারীরা স্ট্যান্ডার্ড, তাৎক্ষণিক নেভিগেশন পান। আপনি সিএসএস-এ সাপোর্ট পরীক্ষা করতে পারেন:

@supports (view-transition: none) {

  /* সমস্ত ভিউ-ট্রানজিশন স্টাইল এখানে যাবে */

  ::view-transition-old(my-element) { ... }

}

বিশ্বব্যাপী দর্শকদের জন্য সেরা অনুশীলন

অ্যানিমেশন প্রয়োগ করার সময়, বিশ্বব্যাপী বিভিন্ন ব্যবহারকারী এবং ডিভাইসের কথা বিবেচনা করা অত্যাবশ্যক।

পারফরম্যান্স: অ্যানিমেশনগুলি দ্রুত এবং সাবলীল হওয়া উচিত। এমন সিএসএস প্রপার্টি অ্যানিমেট করার উপর জোর দিন যা ব্রাউজারের জন্য প্রসেস করা সহজ, প্রধানত transform এবং opacity। width, height, বা margin-এর মতো প্রপার্টি অ্যানিমেট করা প্রতিটি ফ্রেমে লেআউট রিক্যালকুলেশন ট্রিগার করতে পারে, যা তোতলানো এবং একটি খারাপ অভিজ্ঞতার কারণ হতে পারে, বিশেষ করে কম শক্তিশালী ডিভাইসগুলিতে।

অ্যাক্সেসিবিলিটি: কিছু ব্যবহারকারী অ্যানিমেশন থেকে মোশন সিকনেস বা অস্বস্তি অনুভব করেন। সমস্ত প্রধান অপারেটিং সিস্টেম গতি কমানোর জন্য একটি ব্যবহারকারী প্রেফারেন্স সরবরাহ করে। আমাদের এটি সম্মান করতে হবে। prefers-reduced-motion মিডিয়া কোয়েরি আপনাকে এই ব্যবহারকারীদের জন্য আপনার অ্যানিমেশনগুলি নিষ্ক্রিয় বা সহজ করার অনুমতি দেয়।

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* সমস্ত কাস্টম অ্যানিমেশন এড়িয়ে যান এবং একটি দ্রুত, সহজ ফেড ব্যবহার করুন */

    animation: none !important;

  }

}

ব্যবহারকারীর অভিজ্ঞতা (UX): ভাল ট্রানজিশন উদ্দেশ্যমূলক হয়। তাদের ব্যবহারকারীর মনোযোগ আকর্ষণ করা উচিত এবং UI-তে происходя পরিবর্তন সম্পর্কে প্রসঙ্গ সরবরাহ করা উচিত। একটি অ্যানিমেশন যা খুব ধীর তা একটি অ্যাপ্লিকেশনকে অলস মনে করাতে পারে, যখন একটি যা খুব চটকদার তা বিভ্রান্তিকর হতে পারে। ট্রানজিশনের সময়কাল ২০০ms থেকে ৫০০ms এর মধ্যে রাখার লক্ষ্য রাখুন। লক্ষ্য হল অ্যানিমেশনটি দেখার চেয়ে বেশি অনুভূত হওয়া।

উপসংহার: ভবিষ্যৎ হবে সাবলীল

সিএসএস ভিউ ট্রানজিশন এপিআই, এবং বিশেষ করে এর শক্তিশালী সিউডো-এলিমেন্ট ট্রি, ওয়েব ইউজার ইন্টারফেসের জন্য একটি বিশাল অগ্রগতির প্রতিনিধিত্ব করে। এটি ডেভেলপারদের একটি নেটিভ, পারফরম্যান্ট, এবং অত্যন্ত কাস্টমাইজযোগ্য টুলসেট সরবরাহ করে যা একসময় নেটিভ অ্যাপ্লিকেশনগুলির একচেটিয়া ডোমেন ছিল এমন সাবলীল, স্টেটফুল ট্রানজিশন তৈরি করতে পারে। ::view-transition, ::view-transition-group, এবং old/new ইমেজ পেয়ারের ভূমিকা বোঝার মাধ্যমে, আপনি সাধারণ ফেডের বাইরে গিয়ে জটিল, অর্থপূর্ণ অ্যানিমেশন কোরিওগ্রাফ করতে পারেন যা ব্যবহারযোগ্যতা বাড়ায় এবং ব্যবহারকারীদের আনন্দ দেয়।

ব্রাউজার সমর্থন প্রসারিত হওয়ার সাথে সাথে, এই এপিআই আধুনিক ফ্রন্ট-এন্ড ডেভেলপারের টুলকিটের একটি অপরিহার্য অংশ হয়ে উঠবে। এর ক্ষমতাগুলি গ্রহণ করে এবং পারফরম্যান্স ও অ্যাক্সেসিবিলিটির জন্য সেরা অনুশীলনগুলি মেনে চলার মাধ্যমে, আমরা এমন একটি ওয়েব তৈরি করতে পারি যা কেবল আরও কার্যকরী নয়, বরং সর্বত্র সকলের জন্য আরও সুন্দর এবং স্বজ্ঞাত।